<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Input Handler Test</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background: #222;
            color: white;
        }
        .test-container {
            max-width: 800px;
            margin: 0 auto;
        }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #666;
            border-radius: 5px;
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 3px;
        }
        .success { background: #2d5a2d; }
        .error { background: #5a2d2d; }
        .info { background: #2d4a5a; }
        button {
            padding: 8px 16px;
            margin: 5px;
            background: #444;
            color: white;
            border: 1px solid #666;
            border-radius: 3px;
            cursor: pointer;
        }
        button:hover {
            background: #555;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>Enhanced Input Handler Test</h1>
        
        <div class="test-section">
            <h2>Test Instructions</h2>
            <p>This test verifies the enhanced keyboard interaction system for the chat:</p>
            <ul>
                <li><strong>Enter Key:</strong> Should show chat box when hidden, send message when input has content, hide chat when input is empty</li>
                <li><strong>ESC Key:</strong> Should hide chat box when visible</li>
                <li><strong>Focus Management:</strong> Input should be focused when chat is shown</li>
            </ul>
        </div>

        <div class="test-section">
            <h2>Manual Test Controls</h2>
            <button onclick="testShowChat()">Test Show Chat (Enter when hidden)</button>
            <button onclick="testHideChat()">Test Hide Chat (ESC)</button>
            <button onclick="testSendMessage()">Test Send Message (Enter with content)</button>
            <button onclick="testHideEmptyChat()">Test Hide Empty Chat (Enter when empty)</button>
            <button onclick="resetTest()">Reset Test</button>
        </div>

        <div class="test-section">
            <h2>Test Results</h2>
            <div id="test-results"></div>
        </div>

        <div class="test-section">
            <h2>Simulated Chat UI</h2>
            <div id="simulated-chat" style="display: none; border: 2px solid #666; padding: 10px; margin: 10px 0;">
                <div>Chat Messages Area</div>
                <input type="text" id="chat-input" placeholder="Type a message..." style="width: 100%; padding: 5px; margin-top: 10px;">
            </div>
        </div>
    </div>

    <script>
        // Simulate the enhanced input handler functionality
        class MockEnhancedInputHandler {
            constructor() {
                this.chatVisible = false;
                this.setupEventListeners();
            }

            setupEventListeners() {
                document.addEventListener('keydown', (e) => {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        this.handleEnterKey();
                    } else if (e.key === 'Escape') {
                        e.preventDefault();
                        this.handleEscapeKey();
                    }
                });
            }

            handleEnterKey() {
                const chatDiv = document.getElementById('simulated-chat');
                const input = document.getElementById('chat-input');
                
                if (!this.chatVisible) {
                    // Show chat and focus input
                    this.showChat();
                    this.logResult('✓ Enter key showed chat box and focused input', 'success');
                } else {
                    // Check if input has content
                    if (input.value.trim()) {
                        // Send message
                        this.sendMessage(input.value.trim());
                        input.value = '';
                        input.focus();
                        this.logResult('✓ Enter key sent message and cleared input', 'success');
                    } else {
                        // Hide chat
                        this.hideChat();
                        this.logResult('✓ Enter key hid chat when input was empty', 'success');
                    }
                }
            }

            handleEscapeKey() {
                if (this.chatVisible) {
                    this.hideChat();
                    this.logResult('✓ ESC key hid chat box', 'success');
                } else {
                    this.logResult('ℹ ESC key pressed but chat was already hidden', 'info');
                }
            }

            showChat() {
                const chatDiv = document.getElementById('simulated-chat');
                const input = document.getElementById('chat-input');
                chatDiv.style.display = 'block';
                this.chatVisible = true;
                setTimeout(() => input.focus(), 50);
            }

            hideChat() {
                const chatDiv = document.getElementById('simulated-chat');
                chatDiv.style.display = 'none';
                this.chatVisible = false;
            }

            sendMessage(message) {
                this.logResult(`📤 Message sent: "${message}"`, 'info');
            }

            logResult(message, type) {
                const results = document.getElementById('test-results');
                const div = document.createElement('div');
                div.className = `status ${type}`;
                div.textContent = `${new Date().toLocaleTimeString()}: ${message}`;
                results.appendChild(div);
                results.scrollTop = results.scrollHeight;
            }
        }

        // Test functions
        function testShowChat() {
            handler.handleEnterKey();
        }

        function testHideChat() {
            handler.handleEscapeKey();
        }

        function testSendMessage() {
            const input = document.getElementById('chat-input');
            input.value = 'Test message';
            handler.handleEnterKey();
        }

        function testHideEmptyChat() {
            const input = document.getElementById('chat-input');
            input.value = '';
            if (!handler.chatVisible) {
                handler.showChat();
            }
            handler.handleEnterKey();
        }

        function resetTest() {
            document.getElementById('test-results').innerHTML = '';
            handler.hideChat();
            document.getElementById('chat-input').value = '';
            handler.logResult('🔄 Test reset', 'info');
        }

        // Initialize the mock handler
        const handler = new MockEnhancedInputHandler();
        
        // Initial log
        handler.logResult('🚀 Enhanced Input Handler Test initialized', 'info');
        handler.logResult('💡 Try pressing Enter to show chat, type a message and press Enter to send, or press ESC to hide', 'info');
    </script>
</body>
</html>